import React, {useState, useCallback, useEffect, useRef} from 'react';
import {Text, View, Image, StyleSheet, Animated} from 'react-native';

const fill = require('./img/fill.png');
const fillGif = require('./img/fill-gif.gif');
const fillAsh = require('./img/fill-ash.png');

const weekArr = [1, 2, 3, 4, 5, 6, 7];
const Step = ({arr, checkInCount, checkIn, callBack, lastCheckIn = -1}) => {
  console.log(arr, checkInCount, checkIn);
  // let lastCheckIn = -1; //最后一次签到日期
  // if (checkIn === 1) {
  //   arr.forEach((element, index) => {
  //     if (element > 0) {
  //       lastCheckIn = index;
  //     }
  //   });
  // }
  return (
    <View style={styles.stepBox}>
      <View style={styles.step}>
        {arr.map((item, index) => {
          return (
            <StepItem
              key={index}
              callBack={callBack}
              item={item}
              index={index}
              lastCheckIn={lastCheckIn}
              checkIn={checkIn}
            />
          );
        })}
      </View>
      <View style={styles.week}>
        {weekArr.map(item => {
          return (
            <View key={item} style={styles.weekItem}>
              <Text> {item} </Text>
            </View>
          );
        })}
      </View>
    </View>
  );
};

export default Step;

const StepItem = ({checkIn, lastCheckIn, index, item, callBack}) => {
  const fadeAnim = useRef(new Animated.Value(0)).current;
  const [isAnimated, setIsAnimated] = useState(false);
  useEffect(() => {
    if (checkIn > 0) {
      setTimeout(() => {
        setIsAnimated(true);
        Animated.timing(fadeAnim, {
          toValue: 1,
          duration: 1000,
          useNativeDriver: true,
        }).start(() => {
          if (lastCheckIn === index) {
            callBack();
          }
        });
        // 执行渐显
      }, 2000);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [checkIn, lastCheckIn, index]);
  if (lastCheckIn !== index) {
    // 不是最后一天签到时间
    return (
      <View style={styles.stepItem}>
        <Text style={styles.stepItemMoney}>{item > 0 ? '$1' : ''}</Text>
        <Image style={styles.img} source={item > 0 ? fill : fillAsh} />
      </View>
    );
  } else {
    // 是最后一天签到时间, 处理动画效果
    return (
      <View style={styles.stepItem}>
        <Animated.Text
          style={[
            styles.stepItemMoney,
            {
              opacity: fadeAnim,
            },
          ]}>
          {'$1'}
        </Animated.Text>
        <Image
          // eslint-disable-next-line prettier/prettier
          style={styles.img} source={item > 0 ? (!isAnimated ? fillGif : fill) : fillAsh} />
      </View>
    );
  }
};
const styles = StyleSheet.create({
  stepBox: {
    width: '100%',
    position: 'relative',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'column',
  },
  step: {
    width: '100%',
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center',
  },
  stepItem: {
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'column',
  },
  stepItemMoney: {
    height: 20,
    fontSize: 12,
    lineHeight: 20,
  },
  img: {
    width: 40,
    height: 40,
  },
  week: {
    marginTop: 5,
    width: '100%',
    height: 30,
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center',
  },
  weekItem: {
    width: 50,
    height: 30,
    backgroundColor: '#008c8c',
    justifyContent: 'center',
    alignItems: 'center',
  },
});
